import SearchSuggestions from '@/components/SearchSuggestions';
import { useAppSelector } from '@/utils/hooks';
import { searchSuggestionJsonp } from '@/utils/tools/doms';
import { useEffect, useState } from 'react';
import styles from './style.module.less'

/**
 * 极简模式页面
 * @returns ReactNode
 */
const ConciseMode = () => {
  const {
    currentSearchEngines,
    conciseMode
  } = useAppSelector((state) => state.appConfig);
  const [value, setValue] = useState('');
  const [focus, setFocus] = useState(false);

  const openNewTab = (search: string) => {
    window.open(`${currentSearchEngines.url}${search}`)
  }
  if (!conciseMode) {
    return <></>
  }
  return (
    <div
      className={styles.ConciseMode}
      onClick={(e) => {
        setValue('')
      }}
    >
      <div
        className={styles.conciseModeSearch}
      >
        <input
          type="text"
          aria-label='conciseModeSearch'
          className={styles.conciseModeInput}
          value={value}
          onChange={(e) => {
            setValue(e.target.value)
          }}
          onFocus={() => {
            setFocus(true)
          }}
          onClick={(e) => {
            e.stopPropagation();
          }}
          onKeyDown={(e) => {
            if (e.code === "Enter") {
              openNewTab(value)
              setValue('')
            } else {
            }
          }}
        />
        {focus && (
          <SearchSuggestions
            absolute
            searchValue={value}
            itemClick={() => {
              setValue('')
            }}
          />
        )}
      </div>
    </div>
  )
}
export default ConciseMode